<template>
  <div id="money-operat">
    <div class="operat-button">
      <a-radio-group v-model="type">
        <a-radio-button value="1">充值</a-radio-button>
        <a-radio-button value="2">扣费</a-radio-button>
      </a-radio-group>
    </div>
    <a-divider orientation="left">当前金额：￥{{ model.balance }}</a-divider>
    <div>
      <a-spin :spinning="loading">
        <a-form :form="form" @submit="handleSubmit">
          <div v-if="type === '1'">
            <a-form-item v-bind="formItemLayout" label="充值金额">
              <a-input-number
                v-decorator="formData.money"
                :step="0.01"
                :min="0"
                style="width:100%"
                :formatter="
                  value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                "
                :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              ></a-input-number>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="实付金额">
              <a-input-number
                v-decorator="formData.price"
                :step="0.01"
                :min="0"
                style="width:100%"
                :formatter="
                  value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                "
                :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              ></a-input-number>
            </a-form-item>
          </div>
          <div v-else>
            <a-form-item v-bind="formItemLayout" label="扣费金额">
              <a-input-number
                v-decorator="formData.money"
                :step="0.01"
                :min="0"
                :max="model.balance * 1"
                style="width:100%"
                :formatter="
                  value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                "
                :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              ></a-input-number>
            </a-form-item>
          </div>
          <a-form-item v-bind="formItemLayout" label="备注">
            <a-textarea
              v-decorator="formData.desc"
              placehoder="这里是备注..."
              :autosize="{
                minRows: 2,
                maxRows: 6
              }"
            ></a-textarea>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" :loading="loading">
              确定
            </a-button>
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { topUp, consume } from "@/api/user";
export default {
  props: {
    model: {
      default: ""
    }
  },
  data() {
    return {
      type: "1",
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      formData: {
        money: [
          "money",
          {
            rules: [
              {
                required: true,
                message: "请输入金额"
              }
            ]
          }
        ],
        price: [
          "price",
          {
            rules: [
              {
                required: true,
                message: "请输入实付金额"
              }
            ]
          }
        ],
        desc: ["desc", {}]
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true;
          if (this.type === "1") {
            this._topUP(values);
          } else if (this.type === "2") {
            this._consume(values);
          }
        }
      });
    },
    _topUP(values) {
      let data = {
        money: values.money,
        price: values.price,
        desc: values.desc
      };
      topUp(data, this.model.user_id)
        .then(res => {
          this.loading = false;
          if (res.code === 1) {
            this.$emit("success", res);
          }
        })
        .catch(error => {
          this.loading = false;
          this.$common.validateExtend(error, this.form);
        });
    },
    _consume(values) {
      let data = {
        money: values.money,
        desc: values.desc
      };
      consume(data, this.model.user_id)
        .then(res => {
          this.loading = false;
          if (res.code === 1) {
            this.$emit("success", res);
          }
        })
        .catch(error => {
          this.loading = false;
          this.$common.validateExtend(error, this.form);
        });
    }
  }
};
</script>

<style lang="less" scoped>
#money-operat {
  .operat-button {
    text-align: center;
    margin-bottom: 16px;
  }
}
</style>
